<template>

    <div class="organ-page page">
        <div class="content">
            <PlatformCrumb back="返回" style="margin-top: 0;">
                <span style="margin-left: 10px">账号资料</span>
            </PlatformCrumb>
            <div class="organ-detail">
                <p class="title">基本资料</p>
                <el-form action="" class="">
                    <div class="setform">
                        <!-- <div class="setformdiv display-flex-row">
                            <span>旧密码</span>
                            <input type="text" v-model="dataForm.passWord" placeholder="请输入您的旧密码"/>
                        </div> -->
                        <!-- <div class="setformdiv display-flex-row">
                            <span>新密码</span>
                            <input type="text"  v-model="dataForm.newPassword" placeholder="请输入您的新密码"/>
                        </div> -->
                        <!-- <div class="setformdiv display-flex-row">
                            <span>确认密码</span>
                            <input type="text" placeholder="请确认您的密码"/>
                        </div> -->
                    </div>
                    <el-form-item label="旧密码" prop="password">
                        <el-input type="password" v-model="dataForm.passWord"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="password">
                        <el-input type="password" v-model="dataForm.newPassword"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="password">
                        <el-input type='password' v-model="dataForm.newPassword1"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="phone">
                        <el-input type='text' v-model="dataForm.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码" prop="valiCode">
                        <br>
                        <div style="display: flex;justify-content: center;align-items: center;width: 400px">
                            <el-input class="codeInput" v-model="dataForm.valiCode"></el-input>
                            <el-button style="margin-left: 20px" class="btn-color-red" type="primary" :disabled="!isgetcode" @click="getVcode">
                                {{tips_vcode}}
                            </el-button>
                        </div>
                    </el-form-item>
                    <div class="setbtn">
                        <!-- <button class="save" @click="onSet">保存</button> -->
                        <input type="button" class="save" @click="onSet" value="保存">
                        <button class="cacel">取消</button>
                    </div>
                </el-form>


            </div>


        </div>
    </div>

</template>

<script>
    import Wang from 'wangeditor'
    import {mapActions, mapState} from 'vuex'
    import {timingSafeEqual} from 'crypto';
    import PlatformCrumb from "@/components/PlatformCrumb.vue";

    export default {
        components: {
            PlatformCrumb
        },
        data() {
            return {
                isgetcode: true,
                tips_vcode: "发送验证码",
                key: "value",
                dataForm: {}
            }
        },
        computed: {
            ...mapState('Login', [
                'userStatus',
            ]),
        },
        methods: {
            ...mapActions('organ', [
                'set'
            ]),
            ...mapActions('Login', [
                "getSmS",
            ]),

            onSet() {
                // this.dataForm.userId = Number(this.userStatus.id)
                this.set(this.dataForm).then(res => {
                    const {code} = res
                    if (code === 200) {
                        this.$message({
                            type: 'success',
                            message: '成功'
                        });
                        setTimeout(() => {
                            this.$router.push('/organ/index')
                        }, 800);
                    }
                })
            },
            getMath(phone) {
                var start = Math.random().toString(36).substr(-10)
                var sjc = Date.parse(new Date());
                return start + phone + sjc
            },
            // 获取验证码
            getVcode() {
                let data = {
                    "phone": this.getMath(this.dataForm.phone)
                }
                this.isgetcode = false;
                this.getSmS(data).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message({
                            message: "发送成功",
                            duration: 5 * 1000
                        })
                        this.isgetcode = false;
                        var wait = 60;
                        // 验证码倒计时
                        this.timer = setInterval(() => {
                            if (wait == 0) {
                                this.tips_vcode = "发送验证码";
                                this.isgetcode = true;
                                wait = 60;
                                clearInterval(this.timer);
                            } else {
                                this.tips_vcode = wait + "s";
                                this.isgetcode = false;
                                wait--;
                            }
                        }, 1000);
                    } else {
                        this.isgetcode = true;
                    }
                });
            },


        }
    }
</script>

<style scoped>
    .save {
        background: #C60818;
        color: #fff;
        width: 68px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        font-size: 14px;
        margin: 0 21px;
        border-radius: 2px;
        -moz-border-radius: 2px;
        cursor: pointer;
    }

    @import url("porgan.css");
</style>
